<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
    </div>
    <script>
        const vm=new Vue({
            el:"#app",

            // 以后所有data的书写要写成一个函数，函数返回一个数据对象
            data(){
                return {
                    msg:"hello"
                }
            }
        })


        // 1.data 为什么写成函数(data写成对象的缺点如下：)
        // 1.声明data(模仿这个是某个组件的data)
        const data1={
            name:"laowang",
            age:18
        }

        // 当组件复用的时候，很多地方都要对data操作
        const data1_one=data1
        const data1_two=data1

        // 在组件1中修改了data1
        // 因为data1_one data1_two data1 地址都是一样的，只要修改1个，则其他的全部会发生变化
        // 所有我们不会把组件中的data写成对象，否则组件之间的data会互相影响
        data1_one.age=20


        // 2.data为什么写成函数(data写成函数如下：)
        function data2(){
            const o={
                name:"laowang",
                age:18
            }
            return o
        }

        // 当组件被复用的时候，需要拿到data2中的数据，则需要调用data2函数
        // 每次data2函数的调用，都会创建一个新的对象，所以组件之间的data是不会互相影响的
        const data2_one=data2()
        const data2_two=data2()
    </script>
</body>
</html>